<template>
	<view class="wrap" style="padding-bottom: 60px;">

		<view class="search searchFloat">
			<u-search placeholder="请输入商品编号" class="my-search" v-model="form.goodsId" shape="round" action-text="搜索"
				@custom='searchClick' @clear="clearSearch">
			</u-search>
		</view>

		<uni-collapse style="margin-top: -1rpx;">
			<uni-collapse-item title="" :show-animation="true">
				<u-form :model="form" ref="uForm" class="search-item" label-width="104px">
					<!-- <u-form-item label="货主" label-width="150">
						<u-input placeholder="请选择" v-model="form.huoz_id" type="select" @click="show = true" />
						<u-action-sheet border-radius='20' :list="yzzlList" v-model="show"
							@click="changeYzll"></u-action-sheet>
					</u-form-item> -->
					<u-form-item label="库房" label-width="170">
						<uni-data-select
						class="my-input"
						placeholder="请选择库房" v-model="form.kuf_no" :localdata="kufList"
						@showSelector="showSelector($event)"
							@change="changeKuf"></uni-data-select>
					</u-form-item>
					<u-form-item label="区域" label-width="170">
						<uni-data-select
						 class="my-input"
						 @showSelector="showSelector($event)"
						 placeholder="请选择区域" :disabled="notChangeQuyNo" v-model="form.quy_no" :localdata="quNoList"
							@change="changeQuyNo"></uni-data-select>
					</u-form-item>
					<!-- <u-form-item label="商品编号" label-width="170"><u-input v-model="form.goodsId" /></u-form-item> -->
					<view v-show="showHeight" style="margin: 460rpx;"></view>
					<!-- <u-form-item label="单位信息"><u-input v-model="form.unit" /></u-form-item>
					<u-form-item label="托盘号"><u-input v-model="form.palletNumber" /></u-form-item> -->
				</u-form>
			</uni-collapse-item>
		</uni-collapse>
		</uni-section>

		<u-empty v-if="!gmList.length" text="无数据" mode="page"></u-empty>
		<u-cell-group>
			<u-card v-for="(item, index) in gmList" class="task-list-item" :border="false" padding="20" margin="20rpx"
				@click="goTo(index)">
				<view slot="head" class="item-head-my">
					<view class="item-head">
						{{index+1}}.{{item.LOCATIONID}}
					</view>
					<view class = "item-head-right">{{item.LOCATION}}</view>
					<uni-icons style="float: right;" type="forward" size="13"></uni-icons>
				</view>
				<view slot="body">
					<u-row gutter="16">
						<u-col span="12">
							<view class="apply-text"><span>货架：</span>
								<view class="blue-text">{{item.HUOJ_NO}}</view>
							</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>商品名：</span>
								<view class="yellow-text">{{item.GDNAME}}</view>
							</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>数量：</span>{{item.AMOUNT}}</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>批号：</span>{{item.BATCHNO}}</view>
						</u-col>
					</u-row>
				</view>
			</u-card>
			<view class="item-foot">--到底了--</view>
		</u-cell-group>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				showHeight:false,
				gmList:'',
				form: {
					kuf_no:'',
					quy_no:'',
					inbillNumber: '',
					huoz_id: '',
					goodsId: '',
					unit: '',
					palletNumber: ''
				},
				notChangeQuyNo:true,
				kufList:[],
				quNoList:[],
				kubList:[],
				show: false,
				yzzlList: [],
				keyword: '231613156',
				list: [{
						"INPAGENO": "CGD20230404000000336",
						"INPAGENOYW": "JL000000000001",
						"STORAGEID": "SU3",
						"INTYPE": "正常入库",
						"INDATE": "2022-12-23 14:03:16"
					}, {
						"INPAGENO": "CGD20230309000000335",
						"INPAGENOYW": "ASN202303090001",
						"STORAGEID": "SU3",
						"INTYPE": "销退入库",
						"INDATE": "2023-03-09 14:03:18"
					}

				],
			}
		},
		created() {
			// this.getInList()
			this.getGmList()
			// this.getYzzl()
			this.getKuf(2)
		},
		onBackPress() {
			uni.navigateTo({
				// url: "../diaphragm/index",
				url: '../diaphragm/index?item="back"'
			});
			return true
		},
		computed(){
			
			
		},

		methods: {
			getKuf(type) {
				const USER_ID = uni.getStorageSync('USER_ID')
				const KUB = '%'
				const KUF_NO = "%"
				//1获取库别，2获取库房，3获取区域
				const GET_TYPE = type
				let param = USER_ID + "," + KUB + "," + KUF_NO + "," + GET_TYPE;
				console.log(param)
				this.$u.api.general({
						iv_code: "GETKUFQUYNO",
						iv_parm: param
					})
					.then(res => {
						// console.log("返回的res:" + JSON.stringify(res))
						let data = res.data
						console.log("kuf返回的data:" + JSON.stringify(data))
						if (res.success) {
							if (type == "2") {
								this.kufList = data.map(v => {
									this.$set(v, 'text', v.KUF_NO)
									this.$set(v, 'value', v.KUF_NO)
									return v
								})
							} else if (type == "3") {
								this.quNoList = data.map(v => {
									this.$set(v, 'text', v.QUY_NO)
									this.$set(v, 'value', v.QUY_NO)
									return v
								})
							} else {
								this.kubList = data.map(v => {
									this.$set(v, 'text', v.KUB)
									this.$set(v, 'value', v.KUB)
									return v
								})
							}
			
						} else {
							// this.errContent = res.msg
							this.$u.toast(res.msg);
						}
					});
			},
			// 查看选择到的库房的区域
			getKufbyKuf() {
				const USER_ID = uni.getStorageSync('USER_ID')
				const KUB = '%'
				const KUF_NO = this.form.kuf_no ? this.form.kuf_no : "%"
				//1获取库别，2获取库房，3获取区域
				const GET_TYPE = 3
				let param = USER_ID + "," + KUB + "," + KUF_NO + "," + GET_TYPE;
				console.log(param)
				this.$u.api.general({
						iv_code: "GETKUFQUYNO",
						iv_parm: param
					})
					.then(res => {
						console.log("返回的res:" + JSON.stringify(res))
						let data = res.data
						console.log("查看选择到的库房的区域返回的data:" + JSON.stringify(data))
						if (res.success) {
							console.log("hello")
							//补充text
							let newData = data.filter((item) => {
								// 过滤如果有对象的区域参数和已经够选择的区域no相同,那么就不用覆盖已经选择的
								return item.QUY_NO === this.form.quy_no
							})
							if(newData.length>0){
								console.log("不用重新选择,这是从对象集合种筛出来的区域号相同的对象=>"+JSON.stringify(newData))
							}else{
								console.log("重新选择,这是库房对应的对象集合,=>"+JSON.stringify(data))
								this.quNoList=data.map(v => {
									this.$set(v, 'text', v.QUY_NO)
									this.$set(v, 'value', v.QUY_NO)
									return v
								})
								//如果切换的区域
								this.form.quy_no=''
							}
							this.canChangeQuy_no()
			
			
			
			
						} else {
							this.errContent = res.msg
							this.$u.toast(res.msg);
						}
					});
			},
			changeKuf(e) {
				console.log("e:" + e);
				// const item = this.kufList[e];
				// console.log("item:"+item)
				this.form.kuf_no = e
				// 判断一下区域是不是在这个库房,如果在,就不更改区域,如果不在,就更改区域
				this.getKufbyKuf()
				this.notChangeQuyNo = e ? false : true
			
				uni.setStorageSync("call-emput-try-kuf_no",e)
				console.log("呼叫托盘缓存库房号:"+uni.getStorageSync("call-emput-try-kuf_no"))
				this.showHeight = false
			},
			changeQuyNo(e) {
				this.form.quy_no = e
				uni.setStorageSync("call-emput-try-quy_no",e)
				console.log("呼叫托盘缓存区域号:"+uni.getStorageSync("call-emput-try-quy_no"))
			    this.showHeight = false
			},
			// 下拉内容是否展开
			showSelector(res) {
				console.log(res)
				
				this.showHeight = res
			},
			goTo(index) {
				let item = this.gmList[index]
				console.log('item:' + JSON.stringify(item))
				
				uni.navigateTo({
					url: 'index?item=' + JSON.stringify(item)
				});
			},
			findList() {
				this.$u.toast("输入的内容是" + this.keyword)

			},
			clearSearch() {
				this.keyword = ''
			},
			clearHuozId() {
				this.form.huoz_id = ''
			},
			searchClick() {
				// this.$u.toast("触发搜索方法,输入的内容是" + JSON.stringify(this.form))
				// this.getInList()
				this.getGmList()
			},
			getGmList() {
				//1、IV\_KUF\_NO 库房
				// 2、IV\_QUY\_NO 区域
				// 3、IV\_GDSEQ 商品
				const kuf_no = this.form.kuf_no ? this.form.kuf_no :'%'
				const quy_no = this.form.quy_no ? this.form.quy_no :'%'
				const gdseq = this.form.goodsId ? this.form.goodsId :"%"
				
				let param = kuf_no + "," + quy_no + "," + gdseq ;
				console.log(param)
				this.$u.api.general({
						iv_code: "PDAGETGMGHW",
						iv_parm: param
					})
					.then(res => {
						// console.log("返回的res:" + JSON.stringify(res))
						
						if (res.success) {
							let data = res.data
							console.log("getGmList返回的data:" + JSON.stringify(data))
							this.gmList = data
							//补充text
							// this.gmList = data.map(v => {
							// 	this.$set(v, 'text', v
							// 		.GDNAME + "(" + v.GDSEQ + ")"
							// 	) // https://vuejs.org/v2/guide/reactivity.html
							// 	// this.$set(v, 'text', v.KUF_NO)
							// 	this.$set(v, 'value', v.GDSEQ)
							// 	// return v
							// 	return v
							// })
						} else {
							this.$u.toast(res.msg);
						}
						// this.gztList.push({
						// 	"text": "DHJ01",
						// 	"WORKLOAD": "4",
						// 	"CENG": "1",
						// 	"GZT_TYPE": "1",
						// 	"ISZCQFP": "N",
						// 	"STORAGEID": "SU3",
						// 	"WORKSTATION_TYPE": "0",
						// 	"LETDOWNFLAG": "1",
						// 	"GZTID": "DHJ01",
						// 	"GZTNAME": "DHJ01测试工作站",
						// 	"KUF_NO": "LHK"
						// })
					});
			},
			getInList() {
				const STORAGE_ID = uni.getStorageSync('STORAGE_ID')
				const huoz_id = this.form.huoz_id ? this.form.huoz_id : "%"
				const USER_ID = uni.getStorageSync('USER_ID')
				const inbillNumber = this.form.inbillNumber ? this.form.inbillNumber : "%"

				const unit = this.form.unit ? this.form.unit : "%"
				const goodsId = this.form.goodsId ? this.form.goodsId : "%"
				const palletNumber = this.form.palletNumber ? this.form.palletNumber : "%"
				let param = STORAGE_ID + "," + huoz_id + "," + USER_ID + "," +
					inbillNumber + "," + unit + "," + goodsId + "," + palletNumber;
				console.log("iv_parm:" + param)
				this.$u.api.general({
						iv_code: "PDAINBILLINPAGENO",
						iv_parm: param
					})
					.then(res => {
						console.log("返回的res:" + JSON.stringify(res))
						let data = res.data
						console.log("返回的data:" + JSON.stringify(data))
						if (res.success) {
							this.list = data
							if (this.list.length < 1) {
								this.$u.toast("没有查到数据");
							}
						} else {
							this.$u.toast(res.msg);
						}
					});
			},
			getYzzl() {

				const USER_ID = uni.getStorageSync('USER_ID')

				let param = USER_ID;
				console.log("iv_parm:" + param)
				this.$u.api.general({
						iv_code: "GETYZZL",
						iv_parm: param
					})
					.then(res => {

						console.log("返回的res:" + JSON.stringify(res))
						let data = res.data
						console.log("getYzzl返回的data:" + JSON.stringify(data))

						if (res.success) {
							// this.yzzlList = data
							//补充text
							this.yzzlList = data.map(v => {
								this.$set(v, 'text', v.YEZ_NAME + "(" +
									v.YEZ_ID + ")")
								// this.$set(v, 'value', v.YEZ_NO)
								return v
							})
							// 增加一个全部货主的选项
							this.yzzlList.push({
								"YEZ_SIMPLENAME": "所有货主",
								"YEZ_NAME": "所有货主",
								"YEZ_NO": "",
								"YEZ_ID": "",
								"text": "所有货主"
							})
						} else {
							this.$u.toast(res.msg);
						}
					});
			},
			// 货主选择回调
			changeYzll(index) {
				const item = this.yzzlList[index]
				console.log("业主资料:" + JSON.stringify(item))
				console.log("业主资料:" + JSON.stringify(item.YEZ_ID))
				this.form.huoz_id = item.YEZ_ID;
			}
		}

	}
</script>
<style lang="scss" scoped>
	// @import 'index.scss';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.searchFloat {
		// border:1px solid red;
		width: 90%;
		// float:left;
		margin-top: -24rpx;
		position: absolute;
	}

	.more-button {
		margin-top: 35rpx;
		// margin-bottom:15rpx;
	}

	.my-search {
		padding: 10rpx 10rpx;
	}

	.search-item {
		padding: 10rpx 50rpx;
	}

	.my-item {
		background-color: white;
		padding: 30rpx 24rpx 30rpx 24rpx;
		border-radius: 10rpx;
	}

	.my-stop {
		border-bottom: .5upx dashed #ccc;
	}

	.item-head {
		line-height: 50rpx;
		padding-top: 20rpx;
		font-size: 12rpx;
		margin-right: 20rpx;
		color: black;
		font-weight: bold;
		// margin-bottom: 10rpx;

		display: flex;
		align-items: center;
		font-size: 30rpx;
	}

	.item-body-one {
		font-size: 12rpx;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.blue-text {
		display: inline-block;
		color: $uni-color-primary;
	}

	.yellow-text {
		display: inline-block;
		color: $uni-color-warning;
	}

	// .item-body-one-one {
	// 	display: inline-block;
	// 	float: left;
	// 	color: $uni-color-primary;
	// }

	// .item-body-one-two {
	// 	display: inline-block;
	// 	color: $uni-text-color-grey;
	// }

	// .item-body-one-three {
	// 	display: inline-block;
	// 	// margin-right: -37px;
	// 	float: right;
	// 	color: $uni-text-color-grey;
	// }

	// .item-body-two {
	// 	font-size: 12rpx;
	// 	margin-bottom: 20rpx;
	// 	color: $uni-text-color-grey;
	// }

	// .item-body-two-one {
	// 	font-size: 12rpx;
	// 	display: inline-block;
	// 	float: left;
	// }

	// .item-body-two-two {
	// 	font-size: 12rpx;
	// 	display: inline-block;
	// 	float: right;
	// }

	// .item-body-three {
	// 	margin-top: 54rpx;
	// 	font-size: 12rpx;
	// 	text-align: center;
	// 	padding-top: 10rpx;
	// 	border-top: .5upx solid #ccc;
	// }

	// .item-body-three-one {
	// 	// margin-top: 20rpx;
	// 	color: $uni-text-color-grey;
	// 	display: inline-block;
	// 	float: left;
	// }

	// .item-body-three-two {
	// 	color: $uni-color-warning;
	// 	display: inline-block;
	// 	float: left;
	// 	margin-left: 20rpx;
	// }

	// .item-body-three-three {
	// 	color: $uni-text-color-grey;
	// 	display: inline-block;
	// }


	// .item-body-three-four {
	// 	color: $uni-color-warning;
	// 	display: inline-block;
	// 	margin-left: 20rpx;
	// }

	// .item-body-three-five {
	// 	color: $uni-text-color-grey;
	// 	display: inline-block;
	// 	float: right;

	// }

	// .item-foot {
	// 	height: 30rpx;
	// 	background-color: #f0f0f0;
	// }


	// <style lang="scss">
	.demo-uni-row {
		// margin-top: 30rpx;
		// margin-bottom: 10px;
		height: 30rpx;
		// 组件在小程序端display为inline
		// QQ、字节小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	.demo-uni-row-zhan {
		// margin-bottom: 10px;
		height: 20rpx;
		// 组件在小程序端display为inline
		// QQ、字节小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	.demo-uni-row-zhan2 {
		// margin-bottom: 10px;
		height: 15rpx;
		// 组件在小程序端display为inline
		// QQ、字节小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 22px;
		border-radius: 5px;
		text-align: right;
	}

	.import-msg {

		border-radius: 25rpx;
		z-index: 2;
		text-align: center;
		box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
	}

	.common-msg {
		// background-color: pink;
		// margin-top: 80rpx;
		// padding-top: 50rpx;
	}

	.demo-uni-col-key {
		height: 22px;
		border-radius: 5px;
		text-align: left;
		font-size: 12rpx;
	}

	.demo-uni-col-value {
		height: 22px;
		border-radius: 5px;
		text-align: left;
		// padding-left: 3rpx;
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		// background-color: #d3dce6;
	}

	.total {
		color: $uni-color-warning;
	}

	.big {
		font-size: 35rpx;
	}

	.light {
		// background-color: #e5e9f2;
		color: black;
		font-weight: bold;
	}

	.title {
		font-size: 30rpx;
		color: white;
	}

	.info {
		font-size: 20rpx;
	}

	.example-body {
		padding: 30rpx 30rpx 30rpx 30rpx;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		// padding: 15rpx 10rpx 0 10rpx;

		overflow: hidden;
		// height: 380rpx;
	}

	//
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.apply-text {
		font-size: 28rpx;
		color: #333333;

		span {
			color: #999999;
		}
	}

	.item-head-my {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.item-head-right{
		color: #999999;font-size: 22rpx;
	}
	.item-foot{
		text-align:center;
	}
</style>